<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElCard } from 'element-plus'
// const token = localStorage.getItem('token')
const router = useRouter() // 使用 useRoute 来访问路由信息
const hotList = ref([]) // 使用 ref 初始化 hotList 为响应式数组热搜
const topstorylist = ref ([])
const isFlushed = ref(true)

onMounted(async () => {
    try {
        const response = await axios.post('http://127.0.0.1:8000/user/api/hotView/', {
       
        });
        hotList.value = response.data.hot_search;
        topstorylist.value = response.data.topic;
    } catch (error) {
        console.error('Error fetching data', error);
    }
})

const goDetails = (item) => {
    // 确保有搜索关键词再跳转
    if (item.keyword.trim() !== '') {
        router.push({ path: '/search', query: { searchKeyword: item.keyword, isFlushed: isFlushed.value } });
    }
}

</script>

<template>
  <div class="hot-list">
    <el-card class="box-card" v-for="(item, index) in hotList" :key="index" style="margin-bottom: 20px;">
        <div class="clearfix" @click="goDetails(item)">
            <span>#{{ index + 1 }} {{ item.keyword }}</span>
        </div>
    </el-card>
</div>
   
</template>

<style scoped>
.hot-list {
    display: flex;
    flex-direction: column; /* 设置为竖直排列 */
  }
  
  .box-card {
    width: 100%; /* 每个项目占据父容器的全部宽度 */
    margin-bottom: 20px; /* 设置项目之间的底部间距 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    border-radius: 8px; /* 圆角 */
    background-color: #fff; /* 背景色 */
  }
  
  .clearfix {
    overflow: hidden; /* 清除浮动 */
  }
  
  .hot-list span {
    display: inline-block;
    padding: 10px 20px; /* 设置内边距 */
    font-size: 16px; /* 字体大小 */
    color: #333; /* 文字颜色 */
  }
  
</style>
